<div class="container">
  <form class="form-signin" (submit)="signup()" #signUpForm="ngForm">
    <h2 class="form-signin-heading">注&nbsp;&nbsp;&nbsp;&nbsp;册</h2>
    <label for="inputEmail" class="sr-only">邮箱</label>
    <input
      type="email"
      id="inputEmail"
      name="email"
      class="form-control"
      placeholder="邮箱"
      email="true"
      required
      autofocus
      [(ngModel)]="signupForm.email"
      #email="ngModel"
    >
    <!--当email是有效的 当email是干净的，就会影藏-->
    <div *ngIf="email.invalid && (email.dirty || email.touched)"
         class="alert alert-danger">
      <div *ngIf="email.errors.required">
        邮箱必填
      </div>
      <div *ngIf="email.errors.email">
        邮箱无效
      </div>
    </div>
    <div *ngIf="email_err_msg" class="alert alert-danger">
      {{email_err_msg}}
    </div>
    <!--
    Angular 表单双向绑定会为绑定的元素提供一些特殊的类名
    -->
    <label for="inputPassword" class="sr-only">密码</label>
    <input
      type="password"
      id="inputPassword"
      name="password"
      class="form-control"
      placeholder="密码"
      minlength="6"
      maxlength="18"
      required
      [(ngModel)]="signupForm.password"
      #password="ngModel"
    >
    <div *ngIf="password.invalid && (password.dirty || password.touched)"
         class="alert alert-danger">
      <div *ngIf="password.errors.required">
        密码必填
      </div>
      <div *ngIf="password.errors.minlength">
        密码最小为6
      </div>
    </div>
    <button [disabled]="!signUpForm.form.valid" class="btn btn-lg btn-primary btn-block" type="submit" >注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
  </form>
  <p class="info"><a routerLink="/signin">有账号，请点击登录</a></p>
</div>
